<template>
  <div class="login-container">
    <div class="login-mian">
      <h1 class="login-title">登录页面</h1>
      <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" @keyup.enter.native="submitForm('loginForm')" class="login-form">
        <el-form-item class="login-form-item" prop="username">
          <span class="iconfont icon-user_login"></span>
          <el-input v-model="loginForm.username" name="username" type="text" autoComplete="on" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item class="login-form-item" prop="password">
          <span class="iconfont icon-password_login" name="password"></span>
          <el-input v-model="loginForm.password" type="password" autoComplete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-row :gutter="20">
            <el-col :span="14">
              <el-input v-model="loginForm.captcha" placeholder="验证码">
              </el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="验证码">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button  style="width: 100%;" type="primary" @click="submitForm('loginForm')">立即登录</el-button>
        </el-form-item>
      </el-form>
      <div class="clearfix">
          <div class="fr">
            <span @click="$router.push({name:'hello'})" class="text-link ">忘记密码</span>
            <span @click="regist" class="text-link " style="margin=left:20px">立即注册</span>
          </div>
      </div>
    </div>
    <!-- 注册页面 -->
    <register v-if="registerVisible" ref="registerDia"></register>
  </div>
</template>

<script>
import API from '@/api'
import { getUUID } from '@/utils'
import Register from './register'
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: '',
        uuid: '',
        captcha: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名称', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'change' }]
      },
      captchaPath: '',
      registerVisible: false // 注册页面显示控制
    }
  },
  components: {
    Register
  },
  created () {
    this.getCaptcha()
  },
  methods: {
    // 获取验证码
    getCaptcha: function () {
      this.loginForm.uuid = getUUID()
      this.captchaPath = API.common.captcha(this.loginForm.uuid)
    },
    // 提交登录表单
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var params = {
            'username': this.loginForm.username,
            'password': this.loginForm.password,
            'uuid': this.loginForm.uuid,
            'captcha': this.loginForm.captcha
          }
          API.common.login(params).then(({data}) => {
            if (data && data.code === 0) {
              this.$cookie.set('token', data.token, { expires: `${data.expire || 0}s` })
              this.$cookie.set('role', data.role || 'agency', { expires: `${data.expire || 0}s` })
              window.localStorage.setItem('userId', data.user.id)
              window.localStorage.setItem('userName', data.user.name)
              window.localStorage.setItem('userMobile', data.user.mobile)
              window.localStorage.setItem('userTpye', data.user.userType)
              this.$router.replace({ name: 'main' })
            } else {
              this.getCaptcha()
              this.$message.error(data.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    regist () { // 注册
      this.registerVisible = true
      this.$nextTick(() => {
        this.$refs.registerDia.init()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login-container {
  padding-top: 1px;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(~@/assets/images/login-mbg.svg);
}
.login-mian {
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  display: block;
  padding: 25px 50px;
  min-height: 220px;
  width: 420px;
}
.login-title {
  text-align: center;
  font-size: 18px;
  margin-bottom: 25px;
}
.login-form {
  .el-form-item {
    margin-bottom: 25px;
  }
}
.login-form-item {
  /deep/ .el-input__inner {
    padding-left: 40px;
  }
  .iconfont {
    color: #666;
    position: absolute;
    z-index: 2;
    height: 20px;
    width: 20px;
    margin: 10px;
    line-height: 20px;
    text-align: center;
    font-size: 18px;
  }
}
.login-captcha /deep/ img{
  display: block;
  height: 40px;
  width: 100%;
}
</style>
